<!-- 抽奖转盘 -->
<template>
  <view class="container animated fadeInUp">
    <!-- <view v-if="disabled" class="modal"></view> -->
    <view class="rotaryTable-view">
      <!-- 转盘 -->
      <view
        class="rotaryTable"
        :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
      >
        <image
          class="rotaryTable-pic"
          src="https://i-blog.csdnimg.cn/blog_migrate/81a252fcf4f66c6f3c2a506c616e200f.jpeg"
        ></image>
      </view>
      <!-- 抽奖按钮 -->
      <view class="button" @click="lottery">
        <image
          class="button-pic"
          src="https://i-blog.csdnimg.cn/blog_migrate/236779248ec24c4c7aa98304147099fe.png"
        ></image>
      </view>
    </view>
  </view>

  <!-- 奖品弹窗-->
  <uni-popup ref="popup" type="dialog">
    <uni-popup-dialog
      mode="base"
      title="提示"
      confirmText="前往奖品列表"
      cancelText="关闭"
      @confirm="confirm"
    >
      <view class="gift-view">
        <image class="img" :src="prize_image" mode="widthFix"></image>
        <view class="message">{{ prize_name }}</view>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      disabled: false,
      deg: 0, //控制转盘转动度数
      award: '1', //中奖奖品code
      awardIndex: 0,
      prize_name: '中奖奖品name', //中奖奖品name
      prize_image:
        'https://5b0988e595225.cdn.sohucs.com/images/20171104/0f706055584c4da6889ecf6a592791ad.jpeg', // 奖品图片
      //360/8=45deg  每个奖项的间隔度数
      //45/2=22.5deg 起始位置
      arr: [22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5], ///旋转角度

      levelsArr: [
        {
          level: '特等奖',
          name: '特等奖',
          code: '1',
        },
        {
          level: '五等奖',
          name: '现金红包',
          code: '6',
        },
        {
          level: '谢谢参与',
          name: '谢谢参与',
          code: '00',
        },
        {
          level: '四等奖',
          name: '礼盒',
          code: '5',
        },

        {
          level: '三等奖',
          name: '推车',
          code: '4',
        },

        {
          level: '二等奖',
          name: '玩具车',
          code: '3',
        },
        {
          level: '谢谢参与2',
          name: '谢谢参与2',
          code: '22',
        },
        {
          level: '一等奖',
          name: '料理机',
          code: '2',
        },
      ],
    }
  },
  onLoad() {},
  mounted() {},
  methods: {
    confirm() {
      // TODO 做一些其他的事情，手动执行 close 才会关闭对话框
      // ...
      this.$refs.popup.close()
    },
    lottery() {
      if (this.disabled) return
      // 将状态置为true,不可点击
      this.disabled = true
      // console.log(event, '114===')
      // 调用接口，接口返回参数res
      //1
      // this.award = res.code
      // this.prize_image = '../static/turnPlate/prizes/' + res.code + '.png'

      //2
      //this.award = res.code;
      //this.prizeName = res.name;
      //this.prize_image = res.image;

      // for (let i = 0; i < this.levelsArr.length; i++) {
      //   if (this.award == this.levelsArr[i].code) {
      //     this.awardIndex = i
      //     // 不能点按钮
      //     this.disabled = true
      //     this.play(this.awardIndex)
      //   }
      // }

      // 随机数
      let result = Math.floor(Math.random() * 8) //数组索引：[0,7]
      this.play(result)
    },
    async play(d) {
      //设置抽奖结果，可用数据传入代替
      console.log(d)
      await this.sleep(300)
      var angle = this.arr[d]
      //转动动画  分三部分 前中后 前后速度慢 中间快
      // for (var i = 0; i < 1080 + angle; i += 1) {
      //   if (i < 1030) {
      //     this.deg += 3
      //     i += 1
      //     await this.sleep(1)
      //   } else {
      //     this.deg += 1
      //     await this.sleep(i - angle - 1030)
      //   }
      //   if (this.deg >= 360) {
      //     this.deg -= 360
      //   }
      // }

      for (var i = 0; i < 1080 + angle; i += 1) {
        // if (i < 50) {
        //   this.deg += 1
        //   await this.sleep(50 - i)
        // } else
        if (i < 1030 + angle) {
          this.deg += 2
          i += 1
          await this.sleep(1)
        } else {
          this.deg += 1
          await this.sleep(i - angle - 1030)
        }
        if (this.deg >= 360) {
          this.deg -= 360
        }
      }
      //显示弹窗
      await this.sleep()
      this.openPop()
    },

    /*制作sleep效果以满足转动特效*/
    sleep(d) {
      return new Promise((resolve) => setTimeout(resolve, d))
    },

    // 奖品弹窗
    openPop() {
      setTimeout(() => {
        this.$refs.popup.open()
      }, 500)
      setTimeout(() => {
        //转盘归零
        this.deg = 0
        this.disabled = false
      }, 1000)
    },

    closePop() {
      this.$refs.popup.close()
    },
  },
}
</script>

<style lang="scss" scoped>
// 蒙层
// .modal {
//   position: fixed;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   width: 100%;
//   height: 100vh;
//   background: rgba(0, 0, 0, 0.3);
//   z-index: 9;
// }

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .rotaryTable-view {
    position: relative;
  }

  .rotaryTable {
    width: 600rpx;
    height: 600rpx;
    border-radius: 50%;
    overflow: hidden;

    .rotaryTable-pic {
      width: 100%;
      height: 100%;
    }
  }

  .button {
    width: 198rpx;
    height: 237rpx;
    position: absolute;
    left: 50%;
    top: 0;
    margin-top: 184rpx;
    margin-left: -104rpx;

    .button-pic {
      width: 208rpx;
      height: 254rpx;
    }
  }
}
.gift-view {
  width: 500rpx;
  height: 500rpx;
  image {
    width: 100%;
  }
  .message {
    margin-top: 30rpx;
    text-align: center;
  }
}
</style>
